:root {
  --token-pink: hsla(348, 84%, 44%, 1);
  --token-green: hsla(158, 100%, 28%, 1);
  --token-bg-hover: hsla(60, 100%, 80%, 0.25);
  --token-red: hsla(0, 90%, 37%, 1);
  --token-purple: hsla(284, 69%, 33%, 1);
  --token-blue: hsla(206, 72%, 36%, 1);
  --token-gray: hsla(0, 0%, 54%, 1);
  --token-yellow: hsla(46, 100%, 42%, 1);
  --token-brown: hsla(46, 53%, 30%, 1);
}

:root.t_dark {
  --token-pink: hsla(348, 64%, 54%, 1);
  --token-green: hsla(158, 40%, 48%, 1);
  --token-bg-hover: hsla(60, 100%, 20%, 0.1);
  --token-red: hsla(0, 40%, 55%, 1);
  --token-purple: hsla(284, 40%, 59%, 1);
  --token-blue: hsla(206, 32%, 46%, 1);
  --token-gray: hsla(0, 0%, 44%, 1);
  --token-yellow: hsla(46, 53%, 44%, 1);
  --token-brown: hsla(46, 23%, 48%, 1);
}

.token.parameter {
  color: var(--token-pink);
}

.token.class-name,
.token.tag,
.token.selector,
.token.selector .class,
.token.function {
  color: var(--token-green);
}

.highlight-line:hover {
  background-color: var(--token-bg-hover);
}

.highlight-line {
  color: var(--token-color-press);
}

.token.attr-value,
.token.script {
  color: var(--token-red);
}

.token.class,
.token.string,
.token.number,
.token.unit,
.token.color {
  color: var(--token-purple);
}

.token.operator {
  color: inherit; /* Inherits from the parent or default */
}

.token.attr-name,
.token.important {
  color: var(--token-red);
}

.token.keyword,
.token.rule,
.token.pseudo-class {
  color: var(--token-brown);
}

.token.punctuation {
  color: var(--token-yellow);
}

.token.module,
.token.property {
  color: var(--token-blue);
}

.token.comment {
  color: inherit;
  opacity: 0.4; /* Lighter, more transparent */
}

.token.deleted:not(.prefix),
.token.inserted:not(.prefix) {
  display: block;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: -20px;
  margin-right: -20px;
}

.token.deleted:not(.prefix) {
  color: var(--token-red);
}

.token.inserted:not(.prefix) {
  color: var(--token-green);
}

.token.deleted.prefix,
.token.inserted.prefix {
  user-select: none;
  -webkit-user-select: none;
}

.highlight-word {
  color: var(--token-purple);
  background-color: var(--token-yellow); /* Adjusting background to use the yellow variable */
  display: inline-block;
  box-shadow: var(--xOffset) 0 0 0 var(--word-bg), -1px 0 0 0 var(--word-bg);
}

.highlight-word .token {
  color: inherit;
}

.highlight-word.on {
  color: var(--token-purple);
  transition: all 100ms ease;
  cursor: pointer;
}

.highlight-line {
  white-space: pre;
  /* safari fix weird wrapping */
  word-wrap: initial;
}

.highlight-line,
.highlight-line * {
  transition: color 150ms ease;
}

.highlight-line[data-highlighted='false'] {
  color: var(--token-gray);
}

.token.deleted .highlight-word {
  color: var(--token-red);
}

.token.deleted .highlight-word.on {
  color: var(--token-red);
}

.token.inserted .highlight-word {
  color: var(--token-yellow);
}

.token.inserted .highlight-word.on {
  color: var(--token-yellow);
}

*[data-line-numbers='true'].highlight-line {
  position: relative;
  padding-left: var(--space-4);
}

.typewriter {
  opacity: 0;
}
